<template>
  <div class="box">
<!-- 内容 -->
    <div style="width:95%;height:100%;margin:0 auto;" class="box-content">
      <!-- 头部 -->
    <div class="box-top" style="display:flex">
     <div style="width:40%" class='box-top-left'>
        <div class="daohang">
      <i style="font-size:20px;color:#999;line-height:60px;float: left;"  class="el-icon-s-home"></i>  
      <el-breadcrumb >
      <el-breadcrumb-item style="font-size:15px;color:#999; line-height:60px; margin-left:8px;display:block;float: left;">首页 </el-breadcrumb-item>
      <i style="font-size:15px;line-height:63px;margin-left:-3px;float: left" class="el-icon-folder-opened"></i>  
      <el-breadcrumb-item style="font-size:15px;line-height:64px; margin-left:8px;display:block;float: left;">财务管理</el-breadcrumb-item>
      <i style="font-size:15px;line-height:63px; margin-left:5px;float: left"   class="el-icon-folder-opened"></i>  
      <el-breadcrumb-item style="font-size:15px;line-height:64px; margin-left:8px;display:block;float: left;">对账管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
      </div>
    </div>
<!-- 中间部分 -->
 <div class="middle">
 <div class="explain">
  <h6 style="font-size:15px;margin-left:3%;margin-top:6%">下载对账单</h6>
  <h6 style="font-size:15px;margin-left:3%;margin-top:1%">每日9:00前完成数据更新,当前数据更新至2020-8-13</h6>
  <h6 style="font-size:15px;margin-left:3%;margin-top:1%">微信在次日9点启动生成前一天的对账单,建议商户10点后再获取;</h6>
  <h6 style="font-size:15px;margin-left:3%;margin-top:1%">对账单中涉及金额的字段单位为'元'。</h6>
  <h6 style="font-size:15px;margin-left:3%;margin-top:1%">下载账单接口为单日期接口,请尽量保持账单时间段不要过长。</h6>
 </div>

<div class="leixing">
  <div style="display:flex;width:90%;height:50%;align-items: center;justify-content: space-between">
    <span>账单类型</span>
  <span>
    <input type="radio" />
    所有账单</span>
  <span>
    <input type="radio" />
    支付账单</span>
  <span>
    <input type="radio" />
    退款账单</span>
  </div>
 
  <div style="display:flex;width:100%;height:50%;">
    <span >数据类型</span>
  <span style="display:block;margin-left:11px">
    <input type="radio" />
    所有账单</span>
  <span style="display:block;margin-left:9px">
    <input type="radio" />
    仅商城账单</span>
  </div>
</div>
<div class="block" @click=" Manchu()" style=" width:20%; margin-left:4%;margin-top:-2%;">
    <el-date-picker
    @blur=" Man()"
      v-model="value1"
      type="monthrange"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份">
    </el-date-picker>
  </div>

  <div v-if="isFalse" style="width:100%;height:270px;"></div>
   <button @click="download()" style=" width:100px;height:30px; margin-top:1%;margin-left:4%">下载对账单</button>
 </div>
  </div>
</div>
    </template>

    <script>
  export default {
    data() {
      return {
        isFalse:false,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      };
    },
    methods:{
      Manchu(){
        this.isFalse=true
      },
      Man(){
        this.isFalse=false
        },
        download(){
          this.$message({
          message: '下载成功',
          type: 'success'
        });
        }
    },
    
  };
</script>

    <style lang="scss"  scoped> 
  .box{
    width: 100%;
    height: 900px;
  
    .box-top{
  width: 100%;
height: 110px;
// background:blue;
// 导航
.daohang{
  width: 100%;
  height: 50px;
}
}
    .middle{
      width: 100%;
      height: 500px;

      .explain{
        width: 700px;
        height: 270px;
        border: 1px solid #999;
        margin-left: 3%;
      }
    .leixing{
      width: 300px;
      height: 80px;
      margin: 2% 4%;
    }
    }
  }
    </style>